<template>
  <div class="w100 xczxfsdtert display-flex">
    <div class="xczxcfrtery">
      <n-menu
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        :default-expanded-keys="defaultExpandedKeys"
        default-value="jbxin"
      />
    </div>
    <div class="flex-1 pd pt10 pm10">
      <info v-if="kxzcxder == 1"></info>
      <kecheng v-if="kxzcxder == 2"></kecheng>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, h } from "vue";
import info from "./info.vue";
import kecheng from "./kecheng.vue";
const kxzcxder = ref(1);
const menuOptions = ref([
  {
    label: "课程管理",
    key: "jyjkcgl",
    children: [
      {
        key: "jbxin",
        label: () => {
          return h(
            "div",
            {
              onClick: () => {
                kxzcxder.value = 1;
              },
            },
            "基本信息"
          );
        },
      },
      {
        key: "xukser",
        label: () => {
          return h(
            "div",
            {
              onClick: () => {
                kxzcxder.value = 2;
              },
            },
            "学校列表"
          );
        },
      },
    ],
  },
]);
const defaultExpandedKeys = ["jyjkcgl"];
</script>
<style scoped>
.xczxfsdtert {
  height: 100vh;
  background: #f8f8f8;
}
.xczxcfrtery {
  width: 175px;
  background: #181818;
}
</style>
